<template>
<div>
    <button @click="routeLing">路线</button>
    <div id="container"></div>
    <div id="panel"></div>
</div>
  
</template>

<script>
export default {
  data() {
    return {
      amap: "", //高德地图实例
      locationMsg: {},
      destination:'沙河地铁站'
    };
  },
  mounted() {
    this.loca();
  },
  methods: {
    loca() {
      this.amap = new AMap.Map("container");
      var map = this.amap;
      // 定位
      map.plugin("AMap.Geolocation", () => {
        var geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000,
          //定位结果缓存0毫秒  默认0
          maximumAge: 0,
          //自动偏移坐标,偏移后的坐标为高德坐标 ，默认：true
          convert: true,
          //
          showButton: true,
          // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
          buttonOffset: new AMap.Pixel(10, 20),
          //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          zoomToAccuracy: true,
          //  定位按钮的排放位置,  RB表示右下
          buttonPosition: "RB",
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition(); //获取当前的位置
        AMap.event.addListener(geolocation, "complete", (res) => {
          this.locationMsg.addressComponent = res.addressComponent;
          this.locationMsg.formattedAddress = res.formattedAddress;
        }); // data是具体的定位信息
        AMap.event.addListener(geolocation, "error", (err) => console.log(err)); // 定位出错
      });
    },
    routeLing() {
      var self = this;
      this.amap.plugin("AMap.Driving", function () {
        var driving = new AMap.Driving({
          // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
          policy: AMap.DrivingPolicy.LEAST_TIME,
          //map 指定将路线规划方案绘制到对应的AMap.Map对象上
          map:self.amap,
          //panel 指定将结构化的路线详情数据显示到对应的DOM上，传入值需是DOM的ID
          panel:'panel'
        })
        console.log(self.locationMsg);
        var points = [
          { keyword: "北京市地震局（公交站）", city: "北京" },
          { keyword: self.destination,city: "北京" },
        ];

        driving.search(...points, function (status, result) {
          // 未出错时，result即是对应的路线规划方案
          console.log(status,result);
        });
        driving.search(points)
      });
    },
  },
};
</script>

<style lang='scss'>
#container {
  width: 100%px;
  height: 500px;
}
</style>